<template>
    <div>
        <el-dialog
            @close="ConfirmClose"
            :before-close="handleClose"
            title="Add Competition"
            :visible.sync="visible">

            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                     label-position="left">
                <el-row type="flex" justify="start" align="top">
                    <el-form-item label-width="160px" label="competitionId" prop="competitionId">
                        <el-input v-model="formData.competitionId" :disabled='true' clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="start" align="top">
                    <el-form-item label-width="160px" label="competitionRival" prop="competitionRival">
                        <el-input v-model="formData.competitionRival" placeholder="Please Enter" clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                    <el-form-item label-width="180px" label="competitionPotential" prop="competitionPotential">
                        <el-select v-model="formData.competitionPotential" placeholder="Please Enter" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.competitionPotentialOptions" :key="index"
                                       :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>

            </el-form>
            <div slot="footer">
                <el-button @click="ConfirmClose">Cancel</el-button>
                <el-button type="primary" @click="handleConfirm">Confirm</el-button>
            </div>


        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "AddCompetitionDialog",
    props: ['visible', 'close', 'callback','options',],

    data() {
        return {

            formData: {
                "competitionId": null,
                "competitionRival": null,
                "competitionPotential": null,
            },
            rules: {
                chanceName: [{
                    required: true,
                    message: '',
                    trigger: 'blur'
                }],
                competitionRival: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                competitionPotential: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],
            },

        }
    },
    methods: {

        //弹窗关闭
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?',{cancelButtonText:'cancel',confirmButtonText:'confirm'})
                // eslint-disable-next-line no-unused-vars
                .then(e => {
                    done();
                })
        },
        ConfirmClose() {
            this.$refs['elForm'].resetFields();
            this.close()
        },

        handleConfirm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return

                console.log('before close', this.formData);
                //深拷贝
                const dd = JSON.parse(JSON.stringify(this.formData))
                this.callback(dd);


                this.$message({
                    message: "competition add successfully!",
                    type: "success",
                });

                this.ConfirmClose();
            })
        }
    }

}


</script>

<style scoped>

</style>